<template>
  <view>
	  <view v-if="showDialog" class="op">
		  <view>
		  	<view class="model-wrapper">
				<view class="model-title">
					输入验证码
				</view>
				<view class="model-content">
					<view class="content-msg">
						<view class="captcha_box">
							<view class="img-box">
								<view class="img-title">
									验证码
								</view>
								<image class="captcha_img" :src="src" @click="changeImg"></image>
							</view>
							<view class="ipt-box">
								<input placeholder-style="color:#757575;font-size:14px !important;"  class="ipt" type="text" v-model="code" placeholder="请输入左侧验证码"  />
							</view>
						</view>
					</view>
				</view>
				<view class="model-footer u-border-top">
					<view class="model-footer-button u-border-right"  @click="showDialog=false">
						取消
					</view>
					<view class="model-footer-button" style="color: rgb(41, 121, 255);" @click="handlerConfirm">
						确认
					</view>
				</view>
		  	</view>
		  </view>
	  </view>
    <!-- <u-modal  v-model="showDialog"  title="输入验证码" show-cancel-button>
      <view class="captcha_box" style="z-index: 9999999;">	
        <image class="captcha_img" :src="src" @click="changeImg"></image>
        <u-cell-group :border="false">
          <u-field label-width="240" :focus="true" :border="false" v-model="code" label=" " placeholder="请输入左侧验证码" />
        </u-cell-group>
      </view>
    </u-modal > -->
	<u-top-tips ref="uTips"></u-top-tips>
  </view>
</template>

<script>
import http from '@/utils/http'
import api from '@/api'
export default {
  name: 'CaptchaPicture',
  data () {
    return {
      showDialog: false,
      code: '',
      src: '',
      secret_str: '',
      callback: null,
      enableClose: false
    }
  },
  mounted () {

  },
  created () {},
  computed: {},
  methods: {
    handlerConfirm () {
      if (this.code == '') {
		this.$refs.uTips.show({
			title: '请输入验证码',
			type: 'error'
		})
        return false
      }
      let data = {code: this.code, secret_str: this.secret_str}
      this.callback(data)
      this.enableClose = true
	  this.showDialog=false
    },
    beforeClose (action, done) {
      done(this.enableClose)
    },
    show (callback) {
      this.callback = callback
      this.changeImg()
      this.showDialog = true
    },
    changeImg () {
      http
        .get(api.captcha_picture, {})
        .then(res => {
          this.secret_str = res.data.data.secret_str
          this.src = res.data.data.src
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
	
	.op{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0,0,0,.5);
		z-index: 10000;
	}
	
	.model-wrapper{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 654rpx;
		height: auto;
		z-index: 10075;
		margin-top: 0rpx;
		border-radius: 24rpx;
		overflow: hidden;
		background-color: #fff;
	}
	
	.model-title{
		padding-top: 63rpx;
		font-weight: bold;
		text-align: center;
		color: #333334;
		font-size: 30rpx;
	}
	.model-content{
		.content-msg{
			padding: 65rpx 60rpx;
			font-size: 24rpx;
			color: #606266;
			position: relative;
		}
	}
	.model-footer{
		display: flex;
		.model-footer-button{
			flex: 1;
			height: 108rpx;
			line-height: 108rpx;
			font-size: 26rpx;
			box-sizing: border-box;
			cursor: pointer;
			text-align: center;
			border-radius: 2rpx;
		}
	}
.img-box{
	height: 86rpx;
	display: flex;
	border: 1rpx solid #cacac9;
	margin-bottom: 32rpx;
}
.img-box .img-title{
	flex-shrink: 0;
	width: 220rpx;
	line-height: 86rpx;
	background-color: #f7f8f7;
	text-align: center;
	color:#656667; 
	font-size: 28rpx;
} 
.img-box .captcha_img{
  flex-shrink: 0;
  width: 308rpx;
  height:100%;
}
.ipt-box{
	height: 86rpx;
	border: 1rpx solid #cacac9;
}
.ipt-box .ipt{
	width: 100%;
	height: 100%;
	font-size: 30rpx;
	padding-left: 15rpx;
}
.little-border{
  position:absolute;
  width:calc(100% - 310rpx);
  border-bottom:2rpx solid #EEE;
  right:40rpx;
  z-index:10; 
  bottom:2rpx;
}
</style>
